<template>
  <div>
    <!-- 
      将来谁调用cilunbotu，谁为我们传递  lunbotu
      此时，lunbotu  应该是父组件向子组件传值

     -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in lunbotuList" :key="item.url"></mt-swipe-item>
      <img :src="item.img" alt="" :class="{'full': isfull}">
      <mt-swipe-item></mt-swipe-item>
    </mt-swipe>
  </div>
  <!-- 
    分析：为什么商品评论中  轮播图那么丑
    1：首页中的图片，他的宽和高，都是用了100%的宽度
    2：在商品详情页面中，轮播图的图片如果也使用宽高100%的话页面不好看
    3：商品详情中的轮播图，期望，高度100%  但是宽为自适应
    4：经过分析，得到问题的原因首页中的lunbotu和详情中的轮播图，分歧点是，宽度是100%还是自适应
    5：既然这两个轮播图其他方面都是没有冲突的，只是宽度有分歧，那么，我们可以定义一个属性，让使用轮播图的调用者手动指定是否为100%的

   -->
</template>
<script>
export default {
  props:["lunbotuList", "isfull"]//接收轮播图的isfull属性
}
</script>
<style lang="scss" scoped>
  .mint-swipe{
    height: 200px;
    .mint-swipe-item{
      text-align: center;
      //这是设置轮播图，图片的大小
      img{
        //width: 100%;
        height: 100%;
      }
    }
  }
  .full{
    width: 100%;
  }
</style>


